<template>
  <div class="box">
    <div class="button">
      <button id="button" style="cursor: pointer" @click="drawer = true">站点选择</button>
    </div>
    <el-dialog
      title="选择站点"
      :visible.sync="drawer"
      width="30%"
    >
      <!--      :before-close="beforeClose"-->
      <div>
        <h2 id="sitSelect">选择站站点</h2>
        <el-cascader
          v-model="listQuery.selectEquipment"
          :options="siteOptions"
          :props="{ multiple: true }"
          collapse-tags
          clearable
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="beforeClose">确 定</el-button>
      </span>
    </el-dialog>
    <dv-border-box-10>
      <div :id="id" :style="{height,width} " />
    </dv-border-box-10>
  </div>
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons')
import { fetchHomeBarChartData, fetchSiteOptions } from '@/api/home'
import resize from '@/components/Charts/mixins/resize'
export default {
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '99%'
    },
    height: {
      type: String,
      default: '370px'
    }
  },
  data() {
    return {
      drawer: false,
      chart: null,
      siteOptions: [],
      value: '',
      listQuery: {
        selectEquipment: [
          ['天津站点', 'bd16265284510910002'],
          ['天津站点', 'bd16265285067860003'],
          ['天津站点', 'bd16115918765499318'],
          ['天津站点', 'bd16115920421912920']
        ]
      },
      source: []
    }
  },
  watch: {

  },
  created() {
    this.getSiteOptions()
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
    this.updateTypeBarChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    getSiteOptions() {
      fetchSiteOptions().then((res) => {
        this.siteOptions = res.data.siteOptions
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    updateTypeBarChart() {
      fetchHomeBarChartData(this.listQuery).then((res) => {
        this.source = res.data.source
        this.chart.setOption({
          dataset: {
            source: this.source
          }
        })
      })
    },
    beforeClose() {
      this.drawer = false
      this.updateTypeBarChart()
    },
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id), 'macarons')
      this.chart.setOption({
        title: {
          show: true,
          text: '站点信息',
          textStyle: {
            color: '#fff',
            fontSize: 25
          },
          // textAlign: 'center'
          left: 'center',
          top: 10
          // right: '50px'
        },
        textStyle: {
          fontSize: 10,
          color: 'white'
        },
        legend: {
          top: 35,
          icon: 'rect',
          itemWidth: 20,
          itemHeight: 5,
          itemGap: 13,
          left: '60%',
          textStyle: {
            fontSize: 16,
            color: 'white'
          }
        },
        grid: {
          top: 100,
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        tooltip: {},
        dataZoom:
          {
            type: 'inside',
            show: true,
            start: 0
          },
        dataset: {
          source: []
        },
        xAxis: {
          type: 'category',
          nameTextStyle: {
            fontSize: 1,
            textBorderWidth: 2,
            overflow: 'truncate',
            width: 20,
            triggerEvent: true
          },
          axisLine: {
            onZero: true
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#ffffff',
              fontSize: 10
            }
          }
        },
        yAxis: [{
          type: 'value',
          name: '电位',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'solid',
              width: 1
            }
          },
          axisLabel: {
            show: true,
            margin: 10,
            textStyle: {
              fontSize: 14
            },
            formatter: '{value} V',
            fontStyle: 'italic',
            fontWeight: 'bold'
          }
        },
        {
          type: 'value',
          name: '梯度',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'solid',
              width: 0.2
            }
          },
          axisLabel: {
            show: true,
            margin: 10,
            textStyle: {
              fontSize: 14
            },
            formatter: '{value} mV',
            fontStyle: 'italic',
            fontWeight: 'bold'
          }
        }],
        series: [
          {
            type: 'bar',
            yAxisIndex: 0,
            dimensions: ['id', '保护侧电位', '未保护侧电位', '南北地电位梯度', '东西地电位梯度']
          },
          {
            type: 'bar',
            yAxisIndex: 0,
            dimensions: ['id', '保护侧电位', '未保护侧电位', '南北地电位梯度', '东西地电位梯度']
          },
          {
            type: 'bar',
            yAxisIndex: 1,
            dimensions: ['id', '保护侧电位', '未保护侧电位', '南北地电位梯度', '东西地电位梯度']
          },
          {
            type: 'bar',
            yAxisIndex: 1,
            dimensions: ['id', '保护侧电位', '未保护侧电位', '南北地电位梯度', '东西地电位梯度']
          }
        ]
      })
    }
  }
}
</script>
<style scoped>
.box {
  /*background-color: #162d7d;*/
  /*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);*/
  box-shadow: 0 8px 16px 0 #151414;
  transition: 0.3s;
  width: 100%;
  border-radius: 10px;
  /*background-color: #2c3e50;*/
  /*opacity: 0.8*/
}
.box:hover {
  /*box-shadow: 0 8px 16px 0 #151414;*/
}
.button {

}
</style>
